React Native

https://upload.wikimedia.org/wikipedia/commons/thumb/a/a7/React-icon.svg/1024px-React-icon.svg.png

Learn once, write anywhere: Build mobile apps with React.

WebViewをベースとした物ではないため高速に動作する

他のクロスプラットフォームSDKと同じくエッジケースで環境個別の機能を呼び出すこともできる

Windows / macOS への対応

https://microsoft.github.io/react-native-windows/img/homepage/cross-platform.png

サンプルコード

code:helloworld.js

import React from 'react';

import { Text, View } from 'react-native';

const YourApp = () => {

return (

<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>

<Text>

Try editing me! 🎉

</Text>

</View>

);

}

export default YourApp;

どのようにして動くのか

https://reactnative.dev/docs/assets/diagram_ios-android-views.svg

React Nativeは、Reactとアプリプラットフォームのネイティブ機能を使用してAndroidおよびiOSアプリケーションを構築するためのオープンソースフレームワークです。React Nativeでは、JavaScriptを使用してプラットフォームのAPIにアクセスし、Reactコンポーネント（再利用可能でネスト可能なコードのバンドル）を使用してUIの外観と動作を記述します。

React で使用されているAPIを介して各種OSのネイティブ機能を呼び出してアプリケーションを構築する

UI構築にしても React で書くことで独自のエンジンを用いて画面を作るのではなく、例えば Image を呼び出したとき、Androidでは ImageView を呼び出し、iOSでは UIImageView を呼ぶなどネイティブな機能を使ってくれるのでOSとの親和性が高い

したがってWebView上で動作しているReactを操作することでWebView外のアプリケーション機能を呼び出すといった構成のものとはもとから構造が違う。

一方でReactNativeが用意する範囲であれば、CSSのようなやり方でレイアウトやデザインを決定することもできる

Native Components

各種OS固有の機能を使用するコードを書く仕組み、およびそれにより作成されたReact Native用のコンポーネント。

Native Modules

くわえて、既存のコードをモジュールとして読み込み、アプリケーションに組み込める。

採用事例

公式に採用事例がまとまっている。

Pros/Cons

Pros

Facebook による開発がとにかく活発

ホットリロードのサポートがありトライアンドエラーが高速に行える

Cons

開発が活発なので追従が大変かもしれない

React っぽい開発の仕方を知っておく必要がある

パフォーマンスについて

60fpsのなめらかな挙動と、ネイティブなルックアンドフィールを実現するための手段が標準で備わっている。

(※ 高リフレッシュレートなディスプレイが増えてきている昨今60fpsが高速な部類に入るのかという話は別)

一方で、一部で最適化が必要になる場合に備えて公式で、パフォーマンスに関わるガイドラインが用意されている。

TypeScript の使い方

2018 年のブログに取り上げられている。

code:rn-cli.config.js

module.exports = {

getTransformModulePath() {

return require.resolve('react-native-typescript-transformer');

},

getSourceExts() {

}

};

あとはテストの、設定や、細かな import の癖に関する解説まで行われているのでぜひ公式ブログを参照されたし。